﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Meme Swarm</title>
  <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  <script type="application/x-javascript">
 
function draw() {
demo = createDemo(500,500,1)
alert(demo)
demo.loop()

		alert("ok") 
}

var createDemo = function(sizex, sizey, fps){
  var fps = fps ? fps : 10;
  var sleep = 1000/fps;

  var ImagePreloader = function(images, callback){
     this.callback = callback;
     // initialize internal state.
     this.nLoaded = 0;
     this.nProcessed = 0;
     this.aImages = new Array;
     // record the number of images.
     this.nImages = images.length;
     // for each image, call preload()
     for ( var i = 0; i < images.length; i++ ){ 
        this.preload(images[i]);
     }
  }

  ImagePreloader.prototype.preload = function(image){
     // create new Image object and add to array
     var oImage = new Image;
     this.aImages.push(oImage);
  
     // set up event handlers for the Image object
     oImage.onload = ImagePreloader.prototype.onload;
     oImage.onerror = ImagePreloader.prototype.onerror;
     oImage.onabort = ImagePreloader.prototype.onabort;
  
     // assign pointer back to this.
     oImage.oImagePreloader = this;
     oImage.bLoaded = false;
  
     // assign the .src property of the Image object
     oImage.src = image;
  }

  ImagePreloader.prototype.onComplete = function(){
     this.nProcessed++;
     if ( this.nProcessed == this.nImages ){
        this.callback(this.aImages, this.nLoaded);
     }
  }
  
  ImagePreloader.prototype.onload = function(){
     this.bLoaded = true;
     this.oImagePreloader.nLoaded++;
     this.oImagePreloader.onComplete();
  }
  
  ImagePreloader.prototype.onerror = function(){
     this.bError = true;
     this.oImagePreloader.onComplete();
  }
  
  ImagePreloader.prototype.onabort = function(){
     this.bAbort = true;
     this.oImagePreloader.onComplete();
  }
  
  
  var game = document.getElementById('game');
  var onevent = function(e){
     alert(e.type)
     if (e.type == "draw"){
        alert("drawing")
        l5.dirty = true
        game.draw(sleep)
     }
  };

  
  game.onclick     = onevent
  game.ondblclick  = onevent
  /*
  game.onmousedown = onevent
  game.onmouseup   = onevent
  game.onmousemove = onevent
  game.onmouseover = onevent
  game.onmouseout  = onevent
  
  game.onkeydown   = onevent
  game.onkeypress  = onevent
  game.onkeyup     = onevent
  
  game.onblur      = onevent
  game.onchange    = onevent
  
  game.onselect    = onevent
  game.onsubmit    = onevent
  */
  game.onframe     = onevent
  game.ondraw      = onevent

  var createNode = function(){
    var node ={};
    node.children = new Array();
    node.update = function(dt,opt){
      if (node.task){
        node.task(dt,opt);
      }
      for (c in node.children ){
        node.children[c].update(dt,opt)
      }
    }
    node.add = function(c){
      var c = c ? c : createNode();
      node.children.push(c)
      return c       
    }
    node.remove = function(c){
      for (x in node.children){
        if (node.children[x] === c){
          node.children.splice(c,1)
        }
      }
    }
    return node;
  }

  var n1 = createNode()
  var n2 = createNode()
  n1.task = function(dt,opt){
    alert("n1")              
  }
  n2.task = function(dt,opt){
    alert("n2")              
  }

  n1.add(n2)   
  n1.update()
  n1.remove(n2)
  n1.update()             
  game.layers = new Array()
  game.images = new Array()
      
  var createLayer = function(x,y){
  
    var layer = document.createElement('canvas')
    if (layer.getContext){
      layer.width  = x
      layer.height = y
      
      game.appendChild(layer)
      var z = game.layers.push(layer)
      layer.id     = "layer"+z    
      layer.dirty = true              
      layer.update = function(dt,opt){
        ctx = this.getContext("2d");
        ctx.save()
        if (this.dirty){
          layer.ondraw(dt,ctx)
          this.dirty = false
        }
        ctx.restore()
      }
    }
    else{
      alert("Your browser needs to support canvas functionality for this app to work")
    }             
    return layer
  }
  
  l1 = createLayer(300,300)
  l2 = createLayer(300,300)
  l1.ondraw = function(dt,ctx){
    ctx.fillStyle = "rgb(100,0,0)";
    ctx.fillRect (10, 10, 55, 50);
  }
  l2.ondraw = function(dt,ctx){
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
  }    
  l3 = createLayer(300,300)
  l3.ondraw = function(dt,ctx){
    ctx.beginPath();
    ctx.moveTo(25,50);
    ctx.lineTo(50,75);
    ctx.lineTo(75,25);
    ctx.fill();
  }
  l4 = createLayer(300,300)
  l4.ondraw = function(dt,ctx){
    for (i=0;i<4;i++){
      for(j=0;j<3;j++){
        ctx.beginPath();
        var x              = 25+j*50;               // x coordinate
        var y              = 25+i*50;               // y coordinate
        var radius         = 20;                    // Arc radius
        var startAngle     = 0;                     // Starting point on circle
        var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
        var anticlockwise  = i%2==0 ? false : true; // clockwise or anticlockwise
    
        ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
    
        if (i>1){
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }

  var test = function(){
     img =  document.createElement('image')
     img.onload = function(){
       alert(img.src)
       //game.appendChild(img)
     }
     img.src = "http://developer.mozilla.org/wiki-images/en/6/63/Canvas_drawimage2.jpg"
  }  
  test()

  var l5 = createLayer(300,300)
  l5.ondraw = function(dt,ctx){
    if (img){
        ctx.drawImage(img,100,100)
        alert("image")
    }
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
    alert("l5")
  }

  //make an animated image that moves the slicing box each frame        
  game.draw    = function(dt){
      //draw all layers
      for (l in game.layers){
        game.layers[l].update(dt)
      }
  };
  
  game.draw(sleep);
  
  game.loop   = function(){
      game.onframe({type:'logic'})
      game.ondraw({type:'draw'});
      setTimeout(game.loop, sleep);  
  };
  
  alert(1)
  return game
}


  </script>  
	<style>
		body {
			background-color:grey;
			margin:50px;
			text-align:center;
		}

    form[class='game'] {
			border:1px solid #444;    
    }
    
		canvas {
			position:absolute;
		}

	</style>  
  </head>
   <body onload="draw()">
     <form id="game" class="game" onload="init()"/>
   </body>

</html>
